<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{width: 100px;height: 100px;background: red;margin-bottom: 20px;opacity: 0.2}

	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<script type="text/javascript">
		//封装自定义动画框架(左右位置left、top：100px、大小:width、height: 100px、透明度变化: 0-1之间)
		//0表示完全透明    1不透明
		//参数1：element执行动画效果的HTML元素、html标签
		//参数2：json执行动画的属性，可以多属性同时动（对象格式）：{width:500,height:500px,opacity:1}
		//参数3：fn动画执行完毕的回调函数
		function animation(element,json,fn){
			//，每隔50毫秒监视一下属性的位置
			clearInterval(element.timer);
			element.timer = setInterval(function(){
				var flag = true;
				//遍历执行动画的属性,拿到每一个属性
				for(var attr in json){
					//获得执行动画的属性当前位置、以及目的地
					if(attr =='opacity'){
						var now = parseInt(getStyle(element,attr) * 100);	//将透明度转换成100分制的整数
					}else{
						var now = parseInt(getStyle(element,attr));			//100px
					}

					//目的地
					var mudidi = parseInt(json[attr]);

					//每次移动路程的10分之1，越来越接近0，而不会等于0
					var speed = (mudidi - now)/10;
					// document.title = speed;		//0.9 
					document.title = now;			//91  491   
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);


					if(attr =='opacity'){
						element.style[attr] = (now + speed)/100;		//20 30 40  
					}else{
						element.style[attr] = now + speed + 'px';
 					}

 					//移动的过程中，判断是否到达目的地
 					if(now != mudidi){
 						flag = false;
 					}
				}
				//如果还能保证flag为true，说明都到达目的地
				if(flag){
					clearInterval(element.timer);
					if(fn){
						fn();
					}
				}
			}, 50)
		}


		//获得任意css属性的值
		//参数1：获得哪个html标签的属性
		//参数2：css属性名
		function getStyle(element,attr){
			if(window.currentStyle){
				return element.currentStyle[attr];
			}else{
				return getComputedStyle(element,false)[attr];
			}
		}



		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');
		var oDiv3 = document.getElementById('div3');

		oDiv1.onmouseover = function(){
			animation(this,{width:500,height:200,opacity:90},function(){
				alert('hello');
			});
		}
		oDiv2.onmouseover = function(){
			animation(this,{height:500});
		}
		oDiv3.onmouseover = function(){
			animation(this,{opacity:100});
		}

	</script>
</body>
</html>